<template>
  <div class="container">
    <div class="header-box">
      <h3><span>语料管理</span></h3>
      <div class="group-box">
        <el-checkbox-group v-model="checkboxGroup1" size="small">
          <el-checkbox-button v-for="city in ptions" :label="city" :key="city">{{city}}</el-checkbox-button>
        </el-checkbox-group>
        <el-tabs v-model="activeName" @tab-click="">
          <el-tab-pane label="合并为产品" name="1"></el-tab-pane>
          <el-tab-pane label="合并为品种" name="2"></el-tab-pane>
        </el-tabs>
      </div>
      
      <div class="form-box">
            <el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="80px">
                <el-form-item label="生成时间">
                    <el-date-picker size="mini"
                    v-model="value1"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="样本类别">
                    <el-select v-model="formInline.region" placeholder="全部"  size="mini">
                    <el-option label="正向样本" value="shanghai"></el-option>
                    <el-option label="反向样本" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary"  size="mini" @click="">搜索</el-button>
                    <el-button  size="mini" @click="">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        
    </div>
    <div class="main-box">
      <div class="table-top">
            <el-button size="mini" style="float: right;">导出</el-button>
        </div>
        <el-table :data="tableData" border stripe size="mini" style="width: 100%">
            <el-table-column type="index" label="序号" align="center" width="100"></el-table-column>
            <el-table-column prop="name" label="样本数据ID" align="center" width="220"></el-table-column>
            <el-table-column prop="date" label="生成时间" align="center" ></el-table-column>
            <el-table-column prop="type" label="样本类别" sortable align="center" ></el-table-column>
            <el-table-column prop="" label="操作" width="200" align="center" >
                <template slot-scope="scope">
                    <el-button size="mini" type="primary"  @click="$router.push({ path: '/pretreater/look',query: { type:scope.row.type}})">查看</el-button>
                    <el-button size="mini" @click="">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background
        @size-change=""
        @current-change=""
        :current-page="1"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="40">
        </el-pagination>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'semantic',
  data() {
      return {
        activeName:'1',
        value1:'',
        formInline: {
          user: '',
          region: ''
        },
        ptions: ['智能查重合并', '智能归类', '智能映射基准民称'],
        checkboxGroup1:['智能查重合并'],
        tableData: [{
          name: '整编数据202408096571',
          date: '2024-02-28  10:30',
          type:'正向样本'
        },{
          name: '整编数据202408090017',
          date: '2024-02-21  14:21',
          type:'反向样本'
        },{
          name: '整编数据202408090348',
          date: '2024-04-17  15:37',
          type:'正向样本'
        },{
          name: '整编数据201407897982',
          date: '2024-02-28  13:39',
          type:'正向样本'
        },{
          name: '整编数据202408098193',
          date: '2024-03-16  17:14',
          type:'正向样本'
        },{
          name: '整编数据202408190391',
          date: '2024-03-19  15:25',
          type:'反向样本'
        },{
          name: '整编数据202408099872',
          date: '2024-04-11  15:47',
          type:'反向样本'
        },{
          name: '整编数据202408192807',
          date: '2024-05-13  16:41',
          type:'正向样本'
        },{
          name: '整编数据202408797913',
          date: '2024-06-28  16:14',
          type:'正向样本'
        }]
      }
   }
}
</script>
<style lang="scss">
.group-box .el-tabs__nav-wrap::after{
    background-color: transparent;
  }
  .el-checkbox-button.is-checked .el-checkbox-button__inner{
    background-color: #144a74;
    border-color: #144a74;
  }
  .el-tabs__item.is-active {
    color: #144a74;
  }
  .el-tabs__active-bar{
    background-color: #144a74;
  }
</style>
<style lang="scss" scoped>
 .header-box{
      height: 100%;
  }
.table-top{
    height: 40px;
}
.group-box{
  padding: 20px 20px 10px;
}
.el-tabs{
  margin-top: 20px;
  
}
.play-box{
    img{
        display: inline-block;
        width: 15px;
        margin: 0 5px;
    }
}
</style>
